/* =============================================================
   مساعد الدردشة الذكي (المتطلب 12.1) — تنسيقات الودجت العائمة
   مستقل بذاته (لا يعتمد Bootstrap)، يدعم RTL/LTR عبر [dir].
   الألوان مطابقة للهوية البصرية للموقع: كحلي #003a72 + ذهبي #ffc107.
   ============================================================= */

:root {
    --chat-primary: #003a72;        /* الكحلي الأساسي */
    --chat-primary-dark: #012445;   /* كحلي داكن للهوفر/التدرّج */
    --chat-secondary: #102e5e;      /* كحلي ثانوي */
    --chat-accent: #ffc107;         /* الذهبي */
    --chat-bot-bg: #f2f5fa;
    --chat-bot-text: #1c2b45;
    --chat-user-bg: #003a72;
    --chat-radius: 16px;
    --chat-shadow: 0 14px 36px rgba(1, 36, 69, .28);
}

[x-cloak] { display: none !important; }

/* ---- الزر العائم ---- */
.chat-launcher {
    position: fixed;
    bottom: 24px;
    inset-inline-end: 24px;
    z-index: 1050;
    width: 62px;
    height: 62px;
    border: 0;
    border-radius: 50%;
    background: var(--chat-primary);
    color: #fff;
    font-size: 25px;
    cursor: pointer;
    box-shadow: var(--chat-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.chat-launcher::after {
    /* حلقة ذهبية رفيعة تعزّز الهوية */
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--chat-accent);
    opacity: 0;
    transition: opacity .18s ease;
}
.chat-launcher:hover { background: var(--chat-primary-dark); transform: scale(1.06); }
.chat-launcher:hover::after { opacity: 1; }
.chat-launcher:focus-visible { outline: 3px solid var(--chat-accent); outline-offset: 3px; }

/* تفادي تراكب زر الدردشة مع زر الصعود للأعلى (#scroll-top):
   كلاهما أسفل يمين الصفحة في الإنجليزية (dir=ltr)، فنرفع زر الصعود ليستقرّ
   فوق زر الدردشة. في العربية (dir=rtl) زر الدردشة على اليسار فلا تعارض. */
[dir="ltr"] #scroll-top { right: 32px; bottom: 96px; }
@media (max-width: 480px) {
    [dir="ltr"] #scroll-top { right: 26px; bottom: 88px; }
}

/* ---- اللوحة ---- */
.chat-panel {
    position: fixed;
    bottom: 98px;
    inset-inline-end: 24px;
    z-index: 1050;
    width: 366px;
    max-width: calc(100vw - 32px);
    height: 526px;
    max-height: calc(100vh - 130px);
    background: #fff;
    border-radius: var(--chat-radius);
    box-shadow: var(--chat-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: inherit;
    border: 1px solid rgba(1, 36, 69, .08);
}

.chat-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--chat-primary) 0%, var(--chat-primary-dark) 100%);
    color: #fff;
    border-bottom: 3px solid var(--chat-accent);
}
.chat-panel__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.chat-panel__title .fa-robot { color: var(--chat-accent); }
.chat-panel__actions { display: flex; gap: 4px; }
.chat-panel__icon {
    border: 0;
    background: transparent;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    transition: background .15s ease, color .15s ease;
}
.chat-panel__icon:hover { background: rgba(255, 255, 255, .16); color: var(--chat-accent); }
.chat-panel__icon:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; }

.chat-panel__note {
    margin: 0;
    padding: 6px 16px;
    font-size: 12px;
    color: #5b6b86;
    background: #f6f8fc;
    border-bottom: 1px solid #e9eef6;
    text-align: center;
}

/* ---- الرسائل ---- */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fbfcfe;
}
.chat-msg { display: flex; }
.chat-msg--bot { justify-content: flex-start; }
.chat-msg--user { justify-content: flex-end; }

.chat-bubble {
    max-width: 82%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.75;
    white-space: pre-wrap;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(1, 36, 69, .06);
}
.chat-msg--bot .chat-bubble {
    background: var(--chat-bot-bg);
    color: var(--chat-bot-text);
    border: 1px solid #e6ecf5;
}
.chat-msg--user .chat-bubble {
    background: var(--chat-user-bg);
    color: #fff;
}

/* زاوية "الذيل" تتبع جهة استقرار الفقاعة (اتجاه اللوحة)، لا اتجاه نصها.
   نستخدم زوايا فيزيائية صريحة لأن الفقاعة تحمل dir خاصاً بها للنص. */
[dir="ltr"] .chat-msg--bot  .chat-bubble { border-top-left-radius: 4px; }
[dir="ltr"] .chat-msg--user .chat-bubble { border-top-right-radius: 4px; }
[dir="rtl"] .chat-msg--bot  .chat-bubble { border-top-right-radius: 4px; }
[dir="rtl"] .chat-msg--user .chat-bubble { border-top-left-radius: 4px; }

/* ---- مؤشر الكتابة ---- */
.chat-bubble--typing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.chat-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--chat-primary);
    opacity: .55;
    animation: chat-bounce 1.2s infinite ease-in-out;
}
.chat-dot:nth-child(2) { animation-delay: .18s; }
.chat-dot:nth-child(3) { animation-delay: .36s; }
@keyframes chat-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .45; }
    30% { transform: translateY(-5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .chat-dot { animation: none; }
    .chat-launcher { transition: none; }
}

/* ---- منطقة الإدخال ---- */
.chat-input {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #e9eef6;
    background: #fff;
}
.chat-input__field {
    flex: 1;
    resize: none;
    border: 1px solid #cdd7e6;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.6;
    max-height: 120px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.chat-input__field:focus {
    border-color: var(--chat-primary);
    box-shadow: 0 0 0 3px rgba(0, 58, 114, .12);
}
.chat-input__field:disabled { background: #f3f5f9; }
.chat-input__send {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: var(--chat-primary);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background .15s ease;
}
.chat-input__send:hover:not(:disabled) { background: var(--chat-primary-dark); }
.chat-input__send:disabled { opacity: .5; cursor: default; }
.chat-input__send:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; }

/* أيقونة الإرسال تنعكس أفقياً في RTL لتشير للاتجاه الصحيح */
[dir="rtl"] .chat-input__send .fa-paper-plane { transform: scaleX(-1); }

/* ---- شاشات صغيرة ---- */
@media (max-width: 480px) {
    .chat-panel {
        inset-inline: 12px;
        width: auto;
        bottom: 88px;
        height: calc(100vh - 110px);
    }
    .chat-launcher { bottom: 18px; inset-inline-end: 18px; }
}